<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击我</button>
    <div></div>
    <input type="'text">
    <div id="two" style="width: 100px;height: 100px;">
        我是块级元素
    </div>
    <script>
        //存放js代码
        //1.获取button按钮 和div标签
        var btn = ducument.querySelector('button');
        var div = document.querySelector('div');
        var input = ducument.querySelector('input');
        var div2 = document.getElementById('two');
        console.log(btn,div);
        //2.给button按钮绑定单击事件
        /**
         * dom0级事件绑定需要使用关键字on on事件类型 = 事件处理程序
         */ 
        btn.ondblick = function(){
            //innerHTML 表示div的元素内容;
            div.innerHTML = '我是一个div';
            div.style.width = '100px';
            div.style.height = '100px';
            div.style.backgroundColor = 'red';
        }
        //键盘事件
        input.onkeyup = function(){
            console.log('键盘抬起了')
        }
        input.onkeydown = function(){
            console.log('键盘按下了')
        }
        input.onkeypress = function(){
            console.log('键盘持续按下')
        }

        //鼠标移入事件
        div2.onmouseenter =function(){
            div2.style.backgroundColor ='pink'
        }
        //鼠标移出事件
        div2.onmouseleave =function(){
            div2.style.backgroundColor ='orange'
        }
    </script>
</body>
</html>